<template>
  <section class="el-container is-vertical" style="height: 100%">
  	<header class="el-header" style="color: #fff; height: 60px; background: #373d41;">
  		<el-row style="line-height: 60px;">
			  <el-col :span="1" >
			  	<div>
			  		<img style="width: 100%;" src="../../build/logo.png"/>
			  	</div>
			  </el-col>
			  <el-col :span="5":offset="1">
			  	<div style="letter-spacing: 2px;">
			  		<h3>禾火博客後臺管理系統</h3>
			  	</div>
			  </el-col>
			  <el-col :span="2" :offset="15">
			  	<div>
			  		Jimmy
			  	</div>
			  </el-col>
			</el-row>
  	</header>
  	<section class="el-container">
  		<aside class="el-aside" style="width: 200px; background: #333744;">
  			 <el-menu>
		      <el-submenu index="1">
		        <template slot="title"><i class="el-icon-tickets"></i>電影管理</template>
	          <el-menu-item index="1-1" id="film" @click="handleTabsEdit($event,'add')">電影總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="2">
		        <template slot="title"><i class="el-icon-tickets"></i>書籍管理</template>
	          <el-menu-item index="2-1" id="book" @click="handleTabsEdit($event,'add')">書籍總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="3">
		        <template slot="title"><i class="el-icon-tickets"></i>作品管理</template>
	          <el-menu-item index="3-1" id="resouse" @click="handleTabsEdit($event,'add')">作品總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="4">
		        <template slot="title"><i class="el-icon-tickets"></i>生活管理</template>
	          <el-menu-item index="4-1" id="life" @click="handleTabsEdit($event,'add')">生活總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="5">
		        <template slot="title"><i class="el-icon-tickets"></i>電影類型</template>
	          <el-menu-item index="5-1" id="filmType" @click="handleTabsEdit($event,'add')">電影類型總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="6">
		        <template slot="title"><i class="el-icon-tickets"></i>國家管理</template>
	          <el-menu-item index="6-1" id="country" @click="handleTabsEdit($event,'add')">國家總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="7">
		        <template slot="title"><i class="el-icon-tickets"></i>語言管理</template>
	          <el-menu-item index="7-1" id="language" @click="handleTabsEdit($event,'add')">語言總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="8">
		        <template slot="title"><i class="el-icon-tickets"></i>書籍類型</template>
	          <el-menu-item index="8-1" id="bookType" @click="handleTabsEdit($event,'add')">書籍類型總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="9">
		        <template slot="title"><i class="el-icon-tickets"></i>作品類型</template>
	          <el-menu-item index="9-1" id="resouseType" @click="handleTabsEdit($event,'add')">作品類型總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="10">
		        <template slot="title"><i class="el-icon-tickets"></i>前端語言</template>
	          <el-menu-item index="10-1" id="webLanguage" @click="handleTabsEdit($event,'add')">前端語言總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="11">
		        <template slot="title"><i class="el-icon-tickets"></i>後端語言</template>
	          <el-menu-item index="11-1" id="backLanguage" @click="handleTabsEdit($event,'add')">後端語言總覽</el-menu-item>
		      </el-submenu>
		      <el-submenu index="12">
		        <template slot="title"><i class="el-icon-tickets"></i>數據庫管理</template>
	          <el-menu-item index="12-1" id="sqlLanguage" @click="handleTabsEdit($event,'add')">數據庫總覽</el-menu-item>
		      </el-submenu>
		    </el-menu>
  		</aside>
  		<section class="el-container is-vertical">
  			<main class="el-main" style="padding: 0px;">
  				<el-tabs v-model="editableTabsValue" type="card" closable  @edit="handleTabsEdit">
					  <el-tab-pane
					    :key="item.name"
					    v-for="(item, index) in editableTabs"
					    :label="item.title"
					    :name="item.name"
					  >
					 	 	<component :name="item.title" :dataJson="item.data" :is="item.content"></component>
					  </el-tab-pane>
					</el-tabs>
  			</main>
  			<!--<footer class="el-footer" style="height: 60px; background: #333744;">
  				Footer
  			</footer>-->
  		</section>
  	</section>
  </section>
</template>

<script>
	import Test from './Test'
	import Film from './Film'
	import Book from './Book'
	import Resouse from './Resouse'
	import Life from './Life'
	import FilmType from './FilmType'
	import Country from './Country'
	import Language from './Language'
	import BookType from './BookType'
	import ResouseType from './ResouseType'
	import WebLanguage from './WebLanguage'
	import BackLanguage from './BackLanguage'
	import SqlLanguage from './SqlLanguage'
 	export default {
    data() {
      return {
        editableTabsValue: '1',
        editableTabs: [ {
          title: '首頁',
          name: '1',
          content : "vhead",
        }],
        tabIndex:1
      }
    },
    components : {
    	"vhead" : Test,
    	"film" : Film,
    	"book" : Book,
    	"life" : Life,
    	"resouse" : Resouse,
    	"filmType" : FilmType,
    	"country" : Country,
    	"language" : Language,
    	"bookType" : BookType,
    	"resouseType" : ResouseType,
    	"webLanguage" : WebLanguage,
    	"backLanguage" : BackLanguage,
    	"sqlLanguage" : SqlLanguage,
		},
    methods: {
      handleTabsEdit(targetName, action) {
      	let data;
        if (action === 'add') {
        	switch (targetName.$el.id){
        		case "film":
        			data = this.film;
        			break;
    				case "book":
    					data = this.book;
    					break;
    				case "resouse":
    					data = this.resouse;
    					break;
						case "life":
    					data = this.life;
						break;
						case "filmType":
    					data = this.filmType;
						break;
						case "country":
    					data = this.country;
						break;
						case "language":
    					data = this.language;
						break;
						case "bookType":
    					data = this.bookType;
						break;
						case "resouseType":
    					data = this.resouseType;
						break;
						case "webLanguage":
    					data = this.webLanguage;
						break;
						case "backLanguage":
    					data = this.backLanguage;
						break;
						case "sqlLanguage":
    					data = this.sqlLanguage;
						break;
        	}
        	let flag = true;
        	for(let i = 0; i<this.editableTabs.length; i++){
        		if(this.editableTabs[i].name == targetName.$el.id){
        			flag = false;
        		}
        	}
        	if(flag){
        		this.editableTabs.push({
	            title: targetName.$el.innerText,
	            name: targetName.$el.id,
	            content: targetName.$el.id,
	            data: data
	          });
	          if(this.editableTabs.length>10){
	          	 this.$alert('窗口大於10個了，建議關閉幾個哦！', '提示', {
			          confirmButtonText: '确定',
			          callback: action => {
			            this.$message({
			              type: 'info',
			              message: `action: ${ action }`
			            });
			          }
			        })
	          }
        	}
	          
          this.editableTabsValue = targetName.$el.id;
        }
        if (action === 'remove') {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
          }
          
          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
